<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
  <h1>{{ $t('welcome-message') }}</h1>
  <button @click="changeLang('en')">English</button>
  <button @click="changeLang('zh')">中文</button>
  <button @click="changeLang('nl')">Dutch</button>
</div>

<script>
  // 插件与响应性的结合
const i18nPlugin = {
  install (Vue,locales) {
    // 这样会比 Vue.mixin({methods}) 更高效  因为省去了运行时查找 methods 属性以及设置 methods 的开销
    Vue.prototype.$t = function(id) {
      return locales[this.$root.lang][id]
    }
  }
}

Vue.use(i18nPlugin, /* option */ {
  en: { 'welcome-message': 'hello' },
  zh: { 'welcome-message': '你好' },
  nl: { 'welcome-message': 'Hallo' }
})

new Vue({
  el: '#app',
  data: {
    lang: 'en'
  },
  methods: {
    changeLang (lang) {
      this.lang = lang
    }
  }
})
</script>
